<template>
    <div class="container">
        <div class="header">
            <el-card>
                <div>操作日志</div>
            </el-card>
        </div>
        <!-- 用户列表 -->
        <div class="mian-table">
            <div style="padding: 20px;width: 100%;">
                <el-form label-width="60px" :model="form" :inline="true">
                    <el-form-item label="用户id">
                        <el-input v-model="form.userId" @keyup.enter.native="getList()" placeholder="请输入用户id"
                            clearable />
                    </el-form-item>
                    <el-form-item size="large">
                        <el-button type="primary" icon="el-icon-search" @click="getList()"
                            style="margin-left: 12px">查询</el-button>
                        <el-button @click="() => form.adminuserid = ''">重置</el-button>
                        <!-- <el-button @click="addrenyuan" type="success">添加</el-button> -->
                    </el-form-item>
                </el-form>
                <div class="opera-table">
                    <el-table :data="tableData" height="570px" class="table" border style="">
                        <template v-for="(val, index) in columns">
                            <el-table-column align="center" :label="val.title" :key="index" :prop="val.dataKey">
                            </el-table-column>
                        </template>
                        <el-table-column prop="addtime" label="时间" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.addtime | datefilter }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="footer">
            <el-pagination align="center" background @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page.sync="form.pageNo" :page-size="form.pageSize"
                :page-sizes="[1, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { operaLogList } from "@/api/operationLog.js";
import { title } from "@/settings";
import { datefilter } from '@/utils/arrToObj'
import { getUserList} from "@/api/userMangement.js";
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 1,
            tableData: [],
            total: '',
            userName:'',
            columns: [
                {
                    dataKey: 'adminid',
                    title: '用户id',
                },
                {
                    dataKey: 'content',
                    title: '日志内容',
                }
            ],
            form: {
                pageNo: 1,
                pageSize: 10,
                adminuserid: 0,
                userId: ''
                // adminid: Number(localStorage.getItem('userId'))
            },
        }
    },
    beforeMount() {
        this.getList()
    },
    filters: {
        datefilter(val) {
            if (val) {
                var date = new Date(parseInt(val) * 1000);
                var Year = date.getFullYear();
                var Moth =
                    date.getMonth() + 1 < 10
                        ? "0" + (date.getMonth() + 1)
                        : date.getMonth() + 1;
                var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var Hour =
                    date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var Minute =
                    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var Sechond =
                    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                var GMT =
                    Year +
                    "-" +
                    Moth +
                    "-" +
                    Day +
                    "   " +
                    Hour +
                    ":" +
                    Minute +
                    ":" +
                    Sechond;

                return GMT;
            } else {
                return "";
            }
        },
    },
    methods: {
        // 获取日志列表
        async getList() {
            // console.log(1111)
            this.form.adminuserid = Number(this.form.userId)
            let arr = await operaLogList(this.form)
            if (arr.code == 0 && arr.data.length !== 0) {
                const list=await getUserList()
                this.tableData = arr.data.data
                this.total = arr.data.totalCount
                this.loading = false
            }

        },
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.form.pageNo = val;
            this.getList();
        },

    },
}
</script>
<style style="scss" scoped>
.header {
    font-size: 18px;
    font-weight: 400
}

.container {
    background-color: #EBEEF5
}

.mian-table {
    height: 693px;
    margin: 20px;
    background-color: white;

    .add-drawer-btn {
        padding: 20px 0 20px 20px;
        position: absolute;
        bottom: 0;
        right: 5%;
        text-align: right
    }
    .opera-table{
        padding-right: 20px;
        padding-bottom: 20px;
        .table{
            width: 100%;
            margin: 10px;
        }
    }

    .form-item {
        width: 250px;
    }
}

.footer {
    height: 3%;
    background-color: white;
    /* text-align: center; */
    padding: 20px
}
</style>